<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { getsystem } from '@/api/echarts'
export default {
  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    }
  },
  created() {
    getsystem().then(res => {
      this.normalEquipment = res.msg.normalEquipment
      this.alarmEquipment = res.msg.alarmEquipment
      this.offlineEquipment = res.msg.offlineEquipment
      this.faultEquipment = res.msg.faultEquipment
      this.unableEquipment = res.msg.unableEquipment
      this.getEchartRight();
    })
  },
  methods: {
  getEchartRight() {
    let myChart = echarts.init(document.getElementById('chart_right2'));
    let option = {
      color: ['#00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00', '#FFAD05', '#4465fc'],
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],  // 调整半径，使得图形更具层次感
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            formatter: '{b}: {c} ({d}%)',
            textStyle: {
              fontSize: 14,
              fontWeight: 'bold'  // 使标签更易读
            }
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: 18,
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            smooth: true,  // 让线条变得更柔和
            length: 20,
            length2: 30,
          }
        },
        data: [
          {
            value: this.normalEquipment > 0 ? this.normalEquipment : 1,  // 确保最小值至少为1，防止消失
            name: '正常',
            itemStyle: {color: '#00FFBF'}
          },
          {
            value: this.alarmEquipment > 0 ? this.alarmEquipment : 1,  
            name: '报警',
            itemStyle: {color: '#FF007F'}
          },
          {
            value: this.offlineEquipment > 0 ? this.offlineEquipment : 1,  
            name: '离线',
            itemStyle: {color: '#8F00FF'}
          },
          {
            value: this.faultEquipment > 0 ? this.faultEquipment : 1,  
            name: '故障',
            itemStyle: {color: '#FF6F61'}
          },
          {
            value: this.unableEquipment > 0 ? this.unableEquipment : 1,  
            name: '未启用',
            itemStyle: {color: '#DFFF00'}
          }
        ]
      }]
    };

    myChart.setOption(option, true);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  },
}

};
</script>

<style lang="scss" scoped>
.distribution-container {
  .chart {
    height: 3rem;
  }
}
</style>
